<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>起重机场景360°查看器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 使用国内CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 等待页面加载完成后尝试加载OrbitControls
        window.addEventListener('load', function() {
            // 加载OrbitControls
            const script = document.createElement('script');
            script.src = "https://cdn.bootcdn.net/ajax/libs/three.js/r128/OrbitControls.min.js";
            document.head.appendChild(script);
            
            script.onload = function() {
                console.log("OrbitControls加载成功");
                initScene();
            };
            
            script.onerror = function() {
                console.warn("无法加载OrbitControls，使用备用控制器");
                // 定义备用OrbitControls
                THREE.OrbitControls = function(camera, domElement) {
                    this.object = camera;
                    this.domElement = domElement;
                    this.enabled = true;
                    this.target = new THREE.Vector3();
                    this.enableDamping = false;
                    this.dampingFactor = 0.05;
                    
                    this.update = function() {
                        return true;
                    };
                };
                initScene();
            };
        });
    </script>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background-color: #000; }
        canvas { width: 100%; height: 100%; display: block; }
        #info { position: absolute; top: 10px; width: 100%; text-align: center; color: white; }
        #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; }
        #stats { position: absolute; bottom: 10px; left: 10px; color: white; background: rgba(0,0,0,0.5); padding: 5px; }
        #controls { position: absolute; top: 40px; right: 10px; color: white; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px; }
        #controls button { margin: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <div id="info">起重机场景360°查看器 - 拖动旋转，滚轮缩放</div>
    <div id="loading">正在加载点云数据，请稍候...</div>
    <div id="stats"></div>
    <div id="controls">
        <button id="autoRotateToggle">自动旋转</button>
        <button id="resetView">重置视图</button>
    </div>
    <script>
        function initScene() {
            // 初始化场景
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0x111111);
            document.body.appendChild(renderer.domElement);
            
            // 添加控制器
            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;
            
            // 添加灯光
            const ambientLight = new THREE.AmbientLight(0x404040);
            scene.add(ambientLight);
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
            directionalLight.position.set(1, 1, 1);
            scene.add(directionalLight);
            
            // 设置相机位置
            camera.position.set(50, -50, 30);
            camera.lookAt(0, 0, 10);
            
            // 状态显示
            const stats = document.getElementById('stats');
            
            // 控制按钮
            const autoRotateToggle = document.getElementById('autoRotateToggle');
            const resetViewBtn = document.getElementById('resetView');
            
            let autoRotate = true;
            let pointCloud;
            
            // 加载点云数据
            fetch('point_cloud_data.json')
                .then(response => response.json())
                .then(data => {
                    const geometry = new THREE.BufferGeometry();
                    const positions = [];
                    const colors = [];
                    
                    data.forEach(point => {
                        positions.push(...point.position);
                        colors.push(...point.color);
                    });
                    
                    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
                    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
                    
                    const material = new THREE.PointsMaterial({
                        size: 0.15,
                        vertexColors: true,
                        sizeAttenuation: true
                    });
                    
                    pointCloud = new THREE.Points(geometry, material);
                    scene.add(pointCloud);
                    
                    // 更新状态信息
                    stats.textContent = `点云数量: ${data.length} 点`;
                    
                    // 隐藏加载提示
                    document.getElementById('loading').style.display = 'none';
                    
                    // 控制自动旋转
                    autoRotateToggle.addEventListener('click', () => {
                        autoRotate = !autoRotate;
                        autoRotateToggle.textContent = autoRotate ? '停止旋转' : '自动旋转';
                    });
                    
                    // 重置视图
                    resetViewBtn.addEventListener('click', () => {
                        camera.position.set(50, -50, 30);
                        camera.lookAt(0, 0, 10);
                        controls.update();
                    });
                    
                    // 渲染循环
                    function animate() {
                        requestAnimationFrame(animate);
                        
                        if (autoRotate) {
                            pointCloud.rotation.y += 0.005;
                        }
                        
                        controls.update();
                        renderer.render(scene, camera);
                    }
                    
                    animate();
                    
                    // 自动设置按钮状态
                    autoRotateToggle.textContent = '停止旋转';
                })
                .catch(error => {
                    console.error('Error loading point cloud data:', error);
                    document.getElementById('loading').textContent = '加载失败，请刷新页面重试';
                });
            
            // 窗口大小调整
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        }
        
        // 如果THREE已加载完成，直接检查OrbitControls
        if (typeof THREE !== 'undefined' && typeof THREE.OrbitControls !== 'undefined') {
            initScene();
        }
    </script>
</body>
</html>
